<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <input type="text" name="" id=""><button>添加</button>
    <ul>

    </ul>
    <script>
        /**
         * 需求：文本框输入内容，按添加，添加到ul列表中
         * 1. 如果文本框内容为空，弹框不能为空
         * 2. 如果是重复的名字，弹框 xxx已存在
         * 
         */
        // 1. 获取 元素
        var oInput = document.querySelector('input');
        var oBtn = document.querySelector('button');
        var oUl = document.querySelector('ul');

        oBtn.onclick = function () {
            // 获取文本框内容，并去除两侧空格
            var keywords = oInput.value.trim();
            // 判断keywords值的情况
            // 1. 判断是否为空
            if (keywords === '') {
                alert('内容不能为空');
                oInput.value = '';
                return;
            }
            // 2. 判断是否已经添加
            // 2-1. 获取所有的li
            var oLis = document.querySelectorAll('li');// NodeList 伪
            // 2-2. 将oLis转化为普通数组
            oLis = [...oLis];
            // 2-3. 判断keywords是否在oLis的innerHTML的值有相同的
            // 方式一：findIndex 判断是不是-1
            // var index = oLis.findIndex(function(item){
            //     return item.innerText === keywords;
            // })
            // if(index !== -1){
            //     alert(keywords + '已存在');
            //     oInput.value = '';
            //     // 存在就不在添加了，retrun 退出函数
            //     return;
            // }
            // 方式二： find
            // var ele = oLis.find(function(item){
            //     return item.innerText === keywords;
            // })
            // console.log('ele: ', ele);
            // if(ele){
            //     alert(keywords + '已存在');
            //     oInput.value = '';
            //     // 存在就不在添加了，retrun 退出函数
            //     return;
            // }
            // 方式三：includes
            // 1. 将oLis中的innerText 生成一个新数组
            oLis = oLis.map(function(li){
                return li.innerHTML;
            })
            // if(oLis.includes(keywords)){
            //     alert(keywords + '已存在');
            //     oInput.value = '';
            //     // 存在就不在添加了，retrun 退出函数
            //     return;
            // }
            // 方式四：indexOf
            if(oLis.indexOf(keywords) !== -1){
                alert(keywords + '已存在');
                oInput.value = '';
                // 存在就不在添加了，retrun 退出函数
                return;
            }
            
            var oLi = document.createElement('li');
            oLi.innerHTML = keywords;
            oUl.appendChild(oLi);
            // 清空文本框
            oInput.value = '';
        }
    </script>
</body>

</html>